<template>
    <div>
        <comitemVue :songDate="formate()" :isShowIndex="true" />
    </div>
</template>

<script>
import comitemVue from "../components/comitem.vue";
export default {
    components: { comitemVue },

    data() {
        return {
            data: [],
        }
    },
    methods: {

        formate() {
            if (!this.data) {
                return;
            }
            return this.data.tracks.map(item => {
                return {
                    id: item.id,
                    name: item.name,
                    authorNmae: item.ar[0].name,
                    ablunName: item.al.name,
                }
            })
        }
    },
    async beforeMount() {
        this.data = JSON.parse(sessionStorage.getItem(`this.$route.params.id`));
        if (!this.data) {
            this.data = await this._fetch(`/playList/detail/?id=${this.$route.params.id}`);
            this.data = this.data.playlist;
            sessionStorage.setItem(`${this.$route.params.id}`, JSON.stringify(this.data))
        }

    }
}
</script>

<style lang="scss" scoped>
</style>